<template>
    <div style="box-shadow: 5px 5px 10px 0px  rgba(0, 0, 0, 0.2);height: 600px;width: 800px; background-color: #fafafa; position: absolute; left: 55%; top: 55%; transform: translate(-50%,-50%);
    padding: 20px; 
    ">
        <h2>添加菜品</h2>
        <el-divider />
        <br/>
    <el-form :model="food">
      <el-form-item label="foodName" >
        <el-input v-model="food.foodName" autocomplete="off" />
      </el-form-item>
      <p>菜品图片</p>
      <el-upload
            
            class="avatar-uploader"
            action="http://localhost:7444/common/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="food.foodImg"  :src="food.foodImg" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
      <p>菜品分类</p>
      <el-select
      v-model="food.categoryId"
      placeholder="选择菜品分类"
      style="width: 240px"
    >
    <el-option
        v-for="item in categoryList"
        :key="item.categoryId"
        :label="item.categoryName"
        :value="item.categoryId"
      />
        </el-select>
        <el-form-item label="foodPrice" >
        <el-input-number v-model="food.foodPrice" aria-placeholder="0.00"/>
      </el-form-item>
      <el-form-item label="stock" >
        <el-input-number v-model="food.stock"  aria-placeholder="0"/>
      </el-form-item>
      <el-form-item label="foodExplain" >
        <el-input v-model="food.foodExplain" autocomplete="off" />
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="foodAdd(food)">添加菜品</el-button>
</div>
</template>

<script setup>

import { onBeforeMount, ref } from 'vue'
import apiFood from '../../api/Food/Food'
import apiFoodCategory from '../../api/Food/FoodCategory'
import { Plus } from '@element-plus/icons-vue'
const Btoken=sessionStorage.getItem('businessData');
const business=JSON.parse(Btoken);

const food = ref({
    foodName:'',
    foodImg:'',
    categoryId:'',
    foodPrice:'0.00',
    stock:'0',
    foodExplain:'',
    shopId:business.id
});
const categoryList = ref([])
const foodAdd = (food) => {
  apiFood.addFood(food).then(res => {
    if(res.code == 200){
      alert("添加成功")
      window.location.reload()
    }else{
      alert("添加失败")
    }
  })
}
onBeforeMount(() => {
    const data={
      shopId:business.id,
      pageSize:100000,
      pageNum:1
    }
    apiFoodCategory.pageSelectFoodCategory(data)
    .then(response=>{
      categoryList.value=response.data.list;
    })
})
const handleAvatarSuccess = (res, file) => {
  food.value.foodImg = res.data;
};
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>